<template>
  <div class="dashboard-editor-container">
    <panel-group :data="data" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <muti-line :lineData="lineData"></muti-line>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div >
          <order-group :data="data.order" />
        </div>
      </el-col>
      <div v-if="model=='admin'&&data.accesspay!=undefined">
      <el-col :xs="24" :sm="24" :lg="6">
        <div >
          <bar-user :data="data"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div >
           <pie-level :data="levelData" />
           </div>
      </el-col>
      </div>
      <div v-else>
         <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          
          <control :config="config" @onSearch="onSearch" />
          <amount-group :data="amount" style="margin-top: 65px;"/>
          
        </div>
      </el-col>
      </div>
    </el-row>

     <el-row :gutter="32" v-if="model=='admin'&&data.accesspay!=undefined">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper-card">
          <box-card :data="data"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <pie-chart :data="orderData" />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          
          <control :config="config" @onSearch="onSearch" />
          <amount-group :data="amount" style="margin-top: 65px;"/>
          
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import control from "../../components/control/control";
import mutiLine from "./components/mutiLine";
import PanelGroup from "./components/PanelGroup";
import OrderGroup from "./components/OrderGroup";
import BarUser from "./components/BarUser";
import BoxCard from "./components/BoxCard";
import PieChart from "./components/PieChart";
import PieLevel from "./components/PieLevel";
import AmountGroup from "./components/AmountGroup";
export default {
  components: {
    control,
    mutiLine,
    PanelGroup,
    OrderGroup,
    BarUser,
    BoxCard,
    PieChart,
    PieLevel,
    AmountGroup,
  },
  computed:{
    model(){
      return this.$store.state.user.model
    }

  },
  data() {
    return {
      money_visible: false,
      cate_value: "",
      searchWhere: {},
      cate_ids: [],
      amount: [0, 0, 0],
      config: [
        {
          type: "select",
          placeholder: "请选择分类",
          field: "cat_ids",
          val: "",
          options: [],
        },
        {
          type: "date_time",
          placeholder: "请选择订单状态",
          field: "date_time",
          val: "",
        },
      ],
      activeName: "first",
      data: {
        order: [],
        order_amount: 0,
        order_count: 0,
        order_evaluate: 0,
        order_log: [],
        shop_num: 2,
        user_all: 6,
        user_month: 5,
        user_today: 0,
        user_yesterday: 0,
        msg: "",
        accesspay: {
          unsettled: 0,
          settled: 0,
          is_settled: 0,
        },
      },
      lineData: {
        data: [],
        total: [],
        xAxis: [],
      }, //订单统计
      orderData: {
        data: [],
        strarr: [],
      },
      levelData: {
        data: [],
        strarr: [],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //分类下拉选项改变
    cateChange(e) {
      console.log(e);
      this.cate_ids = e;
    },
    // 获取数据
    init() {
      this.get(
        "/" + this.model + "/Statistics/index",
        {},
        "POST"
      ).then((e) => {
        this.data = e;
        for (let i in e.order_log) {
          let days = e.order_log[i].days.substring(
            e.order_log[i].days.length - 2
          );
          this.$set(this.lineData.data, i, e.order_log[i].count);
          this.$set(this.lineData.xAxis, i, days);
          this.$set(this.lineData.total, i, e.order_log[i].total);
        }

        this.strarr = ["未确认", "待支付", "待发货", "已成交"];
        let list = [];
        for (let i in this.data.order) {
          list.push({ value: this.data.order[i], name: this.strarr[i] });
        }
        this.$set(this.orderData, "data", list);
        this.$set(this.orderData, "strarr", [
          "未确认",
          "待支付",
          "待发货",
          "已成交",
        ]);

        list = [];
        for (let i in this.data.level_arr) {
          let num = 0;
          if (this.data.user_level.length > i) {
            num = this.data.user_level[i].value;
          }
          list[i] = { value: num, name: this.data.level_arr[i] };
        }

        this.$set(this.levelData, "data", list);
        this.$set(this.levelData, "strarr", this.data.level_arr);
        this.config[0].options = e.cate;
      });
      
      
    },
    //搜索
    onSearch(map) {
      this.searchWhere = map;
      this.get(
        "/" + this.model + "/Statistics/order",
        { map: map },
        "POST"
      ).then((e) => {
        this.$set(this.amount, 0, e.is_pay_amount);
        this.$set(this.amount, 1, e.done_amount);
        this.$set(this.amount, 2, e.refund_amount);
      });
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  background-color: #fff;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .chart-wrapper-card {
    background: #fff;
    padding: 0px 0px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .chart-wrapper-card {
    padding: 8px;
  }
}
</style>